<script setup>
import HomeCategory from "./components/HomeCategory.vue";
import HomeBanner from "./components/HomeBanner.vue";
import HomeNew from "./components/HomeNew.vue";
import HomeHot from "./components/HomeHot.vue";
import HomeProduct from "./components/HomeProduct.vue";
import { useRoute } from "vue-router";
import { watch } from "vue";
import { ref } from "vue";
import HomeSearch from "./components/HomeSearch.vue";
const route = useRoute();
const productList = ref([]);
watch(
  () => route.query,
  () => {
    if (route.path === "/") {
      if (route.query.products && JSON.parse(route.query.products).length > 0) {
        productList.value = JSON.parse(route.query.products);
        console.log("productList ", productList.value);
      }
    }
  },
  {
    immediate: true,
  }
);

</script>

<template>
  <div class="container">
    <HomeCategory />
    <HomeBanner />
  </div>
  <HomeNew />
  <HomeHot />
  <HomeProduct />
</template>
<style lang="scss" scoped>
.search {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.sub-list {
  margin-top: 20px;
  background-color: #fff;

  ul {
    display: flex;
    padding: 0 32px;
    flex-wrap: wrap;

    li {
      width: 168px;
      height: 160px;

      a {
        text-align: center;
        display: block;
        font-size: 16px;

        img {
          width: 100px;
          height: 100px;
        }

        p {
          line-height: 40px;
        }

        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
</style>
